<template>
  <div>
    <el-card class="box-card">
      <div class="searchDiv">
        <SearchView @getValue="search"></SearchView>
      </div>
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column
          type="index"
          label=""
          align="center"
          width="50"
          height="50"
        >
        </el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="">
        </el-table-column>
        <el-table-column
          prop="order_price"
          label="订单价格"
          align="center"
          width="80"
        >
        </el-table-column>
        <el-table-column label="是否付款" align="center" width="80">
          <el-tag type="success">已付款</el-tag>
        </el-table-column>
        <el-table-column
          prop="is_send"
          label="是否发货"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column prop="update_time" width="160" label="下单时间">
        </el-table-column>
        <el-table-column label="操作" width="240" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="updataAddress(scope.row.order_id)"
              >修改地址</el-button
            >
            <el-button type="success" @click="lookLogistics(scope.row.order_id)"
              >查看物流</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <PageView :tableData="tableData" :total="total"></PageView>
    </el-card>

    <!-- 点击修改地址的弹出框 -->
    <el-dialog title="修改收货地址" :visible.sync="updataFlag">
      <el-form :model="form" :rules="rules">
        <el-form-item label="地址" :label-width="formLabelWidth" prop="region">
          <el-cascader
            :options="options"
            :props="{ checkStrictly: true }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item
          label="详细地址"
          :label-width="formLabelWidth"
          prop="input"
        >
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="form.input"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updataFlag = false">取 消</el-button>
        <el-button type="primary" @click="updataFlag = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 点击查看物流的弹出框 -->
    <el-dialog title="物流信息" :visible.sync="logisticsFlag">
      <el-timeline :reverse="false" style="margin-left: 50px">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.time"
        >
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
import SearchView from "@/components/SearchView.vue";
import PageView from "@/components/PageView.vue";
import $ from "@/api/orders";
export default {
  name: "TableSheet",
  data() {
    return {
      tableData: [],
      pagenum: 1,
      pagesize: 10,
      total: 0,
      updataFlag: false,
      logisticsFlag: false,
      form: {
        region: "",
        input: "",
      },
      rules: {
        region: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        input: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
      options: [
        {
          value: "beijing",
          label: "北京市",
          children: [
            {
              value: "dc",
              label: "东城区",
            },
            {
              value: "xc",
              label: "西城区",
            },
            {
              value: "cy",
              label: "朝阳区",
            },
            {
              value: "ft",
              label: "丰台区",
            },
            {
              value: "sjs",
              label: "石景山区",
            },
          ],
        },
        {
          value: "tianjin",
          label: "天津市",
          children: [
            {
              value: "hp",
              label: "和平区",
            },
            {
              value: "hd",
              label: "河东区",
            },
            {
              value: "hp",
              label: "和平区",
            },
            {
              value: "nk",
              label: "南开区",
            },
            {
              value: "hb",
              label: "河北区",
            },
          ],
        },
        {
          value: "heibei",
          label: "河北省",
          children: [
            {
              value: "sjz",
              label: "石家庄市",
            },
            {
              value: "ts",
              label: "唐山市",
            },
            {
              value: "qhd",
              label: "秦皇岛市",
            },
            {
              value: "hd",
              label: "邯郸市",
            },
            {
              value: "xt",
              label: "邢台市",
            },
          ],
        },
        {
          value: "shanxi",
          label: "山西省",
          children: [
            {
              value: "ty",
              label: "太原市",
            },
            {
              value: "dt",
              label: "大同市",
            },
            {
              value: "yq",
              label: "阳泉市",
            },
            {
              value: "cz",
              label: "长治市",
            },
            {
              value: "jc",
              label: "晋城市",
            },
          ],
        },
        {
          value: "nmgzzq",
          label: "内蒙古自治区",
          children: [
            {
              value: "hhht",
              label: "呼和浩特市",
            },
            {
              value: "bt",
              label: "包头市",
            },
            {
              value: "wh",
              label: "乌海市",
            },
            {
              value: "cf",
              label: "赤峰市",
            },
            {
              value: "tl",
              label: "通辽市",
            },
          ],
        },
      ],
      formLabelWidth: "100px",
      activities: [
        {
          time: "2018-05-10 09:39:00",
          ftime: "2018-05-10 09:39:00",
          context: "已签收,感谢使用顺丰,期待再次为您服务",
          location: "",
        },
        {
          time: "2018-05-10 08:23:00",
          ftime: "2018-05-10 08:23:00",
          context:
            "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
          location: "",
        },
        {
          time: "2018-05-10 07:32:00",
          ftime: "2018-05-10 07:32:00",
          context: "快件到达 [北京海淀育新小区营业点]",
          location: "",
        },
        {
          time: "2018-05-10 02:03:00",
          ftime: "2018-05-10 02:03:00",
          context:
            "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
          location: "",
        },
        {
          time: "2018-05-09 23:05:00",
          ftime: "2018-05-09 23:05:00",
          context: "快件到达 [北京顺义集散中心]",
          location: "",
        },
        {
          time: "2018-05-09 21:21:00",
          ftime: "2018-05-09 21:21:00",
          context: "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
          location: "",
        },
        {
          time: "2018-05-09 13:07:00",
          ftime: "2018-05-09 13:07:00",
          context: "顺丰速运 已收取快件",
          location: "",
        },
        {
          time: "2018-05-09 12:25:03",
          ftime: "2018-05-09 12:25:03",
          context: "卖家发货",
          location: "",
        },
        {
          time: "2018-05-09 12:22:24",
          ftime: "2018-05-09 12:22:24",
          context: "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
          location: "",
        },
        {
          time: "2018-05-08 21:36:04",
          ftime: "2018-05-08 21:36:04",
          context: "商品已经下单",
          location: "",
        },
      ],
    };
  },
  created() {
    this.getData(this.pagenum, this.pagesize);
  },
  mounted() {
    this.$bus.$on("changeNum", (val) => {
      this.pagenum = val;
      this.getData(this.pagenum, this.pagesize);
    });
    this.$bus.$on("changeSize", (val) => {
      this.pagesize = val;
      this.getData(this.pagenum, this.pagesize);
    });
  },
  methods: {
    //定义请求数据的函数
    async getData(start, num, query) {
      const orderData = await $.getOrderApi(start, num, query);
      if (query) {
        this.tableData = orderData.goods.filter((item) => {
          return item.order_id == query;
        });
      } else {
        this.tableData = orderData.goods;
      }

      this.total = orderData.total;
    },
    //修改地址的函数
    updataAddress(id) {
      this.updataFlag = true;
    },
    //查看物流
    lookLogistics(id) {
      this.logisticsFlag = true;
    },
    //查询
    search(value) {
      this.getData(this.pagenum, this.pagesize, value);
    },
  },
  components: { SearchView, PageView },
};
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.box-card {
  width: 100%;
  margin-top: 10px;
}
.searchDiv {
  width: 35%;
  margin-bottom: 10px;
}
.el-table-column {
  height: 50px;
}
</style>